<template>
  <div>
    <div>
      <el-button size="mini" @click="handleAdd(0, {deptId: 0})">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="deptId"
      default-expand-all
      size="small"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label="部门名称">
        <template slot-scope="scope">
          <span>{{ scope.row.deptName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd(scope.$index, scope.row)"
          >新增</el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- dialog 增加 模态框 -->
    <el-dialog
      :title="dialogInfo.title"
      :visible.sync="dialogInfo.dialogVisible"
      :width="dialogInfo.width"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="上级部门" prop="parentId" v-if="this.ruleForm.deptId == 0">
          <treeselect
            v-model="ruleForm.parentId"
            :options="deptOptions"
            :normalizer="normalizer"
            placeholder="选择上级部门"
          />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="ruleForm.deptName"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            size="medium"
            controls-position="right"
            v-model="ruleForm.sort"
            :step-strictly="true"
            :min="0"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDeptTree,
  updateDept,
  addDept,
  deleteDept
} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  name: "dept",
  data() {
    return {
      tableData: [],
      deptOptions: [],
      dialogInfo: {
        dialogVisible: false,
        title: "",
        width: "30%"
      },
      ruleForm: {
        deptId: 0,
        sort: 0,
        deptName: "",
        parentId: 0
      },
      rules: {
        parentId: [
          { required: true, message: "请选择部门", trigger: "change" }
        ],
        deptName: [
          { required: true, message: "请输入部门名称", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getDeptTree().then(resp => {
        if (resp.code == 0) {
          this.tableData = resp.data.deptTree;
          this.deptOptions = [];
          const dept = { deptId: 0, deptName: "主类目", children: [] };
          dept.children = resp.data.deptTree;
          this.deptOptions.push(dept);
        }
      });
    },
    // 修改部门
    handleEdit(index, row) {
      // 打开dialog
      this.dialogInfo.title = "编辑";
      this.dialogInfo.dialogVisible = true;
      this.clearValidate("ruleForm");
      this.ruleForm.deptId = row.deptId;
      this.ruleForm.sort = row.sort;
      this.ruleForm.deptName = row.deptName;
      this.ruleForm.parentId = row.parentId;
    },
    // 删除部门
    handleDelete(index, row) {
      deleteDept(row.deptId).then(resp => {
        if (resp.code == 0) {
          this.notifySuccess(resp.message);
          this.getList();
        }
      });
    },
    // 新增dialog
    handleAdd(index, row) {
      this.dialogInfo.title = "新增";
      this.dialogInfo.dialogVisible = true;
      this.resetForm();
      this.clearValidate("ruleForm");
      this.ruleForm.deptId = row.deptId
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    // 移除表单项的校验结果
    clearValidate(formName) {
      this.$nextTick(function() {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.$refs[formName].clearValidate();
      });
    },
    // 关闭dialog
    closeDialog() {
      this.dialogInfo.dialogVisible = false;
    },
    // 提交
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // 判断是增加还是修改
          if (this.dialogInfo.title == "新增") {
            let obj = {
              deptName: this.ruleForm.deptName,
              sort: this.ruleForm.sort,
              parentId: this.ruleForm.deptId
            };
            addDept(obj).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              } else {
                this.notifyErr(resp.message);
              }
            });
          } else {
            let obj = {
              deptId: this.ruleForm.deptId,
              deptName: this.ruleForm.deptName,
              sort: this.ruleForm.sort
            };
            updateDept(obj).then(resp => {
              if (resp.code == 0) {
                this.notifySuccess(resp.message);
                this.closeDialog();
                this.getList();
              } else {
                this.notifyErr(resp.message);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单
    resetForm() {
      this.ruleForm.id = "";
      this.ruleForm.deptName = "";
      this.ruleForm.parentId = 0;
      this.ruleForm.sort = 0;
    },
  }
};
</script>